<template>
	<view class="container">
		<view class="header">
			<view class="title">紫薇命盘</view>
		</view>
		
		<view class="content-card">
			<view class="subtitle">紫微斗数的奥秘</view>
			<view class="desc-text">
				紫微斗数是中国传统命理学的瑰宝，它源于天文、易学和五行阴阳学说，被誉为"皇极之学"。通过您的出生年、月、日、时，可推算出独特的命盘结构，揭示您的先天命格、人生轨迹和吉凶祸福。
			</view>
			
			<!-- 添加日期选择器 -->
			<view class="date-select-section">
				<view class="section-title">推算您的命盘</view>
				<view class="date-picker">
					<picker 
						mode="date" 
						:value="selectedDate" 
						:start="getMinDate()"
						:end="getMaxDate()"
						@change="handleDateChange"
					>
						<view class="picker-input">
							{{ selectedDate || '请选择您的出生日期' }}
						</view>
					</picker>
				</view>
				<button class="query-btn" @click="calculateBirthdayCode">揭示命盘秘密</button>
			</view>
			
			<!-- 计算结果展示 -->
			<view v-if="codeResult" class="result-section">
				<view class="result-title">您的命主星：<text class="code-number">{{ codeResult.number }}</text></view>
				<view class="energy-bar" :style="{ background: codeResult.color }"></view>
				<view class="result-desc">{{ codeResult.desc }}</view>
				
				<view class="result-details">
					<view class="detail-item">
						<view class="detail-icon" :style="{ background: codeResult.color }">命</view>
						<view class="detail-content">
							<view class="detail-title">命主格局</view>
							<view class="detail-text">{{ codeResult.mission }}</view>
						</view>
					</view>
					
					<view class="detail-item">
						<view class="detail-icon" :style="{ background: codeResult.color }">才</view>
						<view class="detail-content">
							<view class="detail-title">才华禀赋</view>
							<view class="detail-text">{{ codeResult.talents }}</view>
						</view>
					</view>
					
					<view class="detail-item">
						<view class="detail-icon" :style="{ background: codeResult.color }">劫</view>
						<view class="detail-content">
							<view class="detail-title">命中劫难</view>
							<view class="detail-text">{{ codeResult.challenges }}</view>
						</view>
					</view>
					
					<view class="detail-item">
						<view class="detail-icon" :style="{ background: codeResult.color }">解</view>
						<view class="detail-content">
							<view class="detail-title">化解之道</view>
							<view class="detail-text">{{ codeResult.advice }}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="divider">
				<view class="divider-line"></view>
				<view class="divider-text">命理常识</view>
				<view class="divider-line"></view>
			</view>
			
			<view class="section">
				<view class="section-title">紫微命盘的推算</view>
				<view class="method-desc">
					紫微斗数是复杂而精密的命理体系，通过出生年、月、日、时四个要素，推算出命宫位置和十四主星的落宫，形成独特的命盘结构，揭示人生的方方面面。
				</view>
				
				<view class="example-box">
					<view class="example-title">命盘构成</view>
					<view class="example-content">
						<view class="example-text">十二宫位：命宫、兄弟宫、夫妻宫、子女宫等</view>
						<view class="calculation">十四主星：紫微、天机、太阳、武曲等</view>
						<view class="calculation">众多辅星：文昌、文曲、禄存、天魁等</view>
						<view class="example-result">组合形成详尽的命盘</view>
					</view>
				</view>
			</view>
			
			<view class="number-overview">
				<view class="number-row">
					<view v-for="i in 3" :key="i" class="number-brief" :class="'number-' + i">
						<view class="number-circle">{{ getStarSymbol(i) }}</view>
						<view class="number-keyword">{{ getStarName(i) }}</view>
					</view>
				</view>
				
				<view class="number-row">
					<view v-for="i in 3" :key="i+3" class="number-brief" :class="'number-' + (i+3)">
						<view class="number-circle">{{ getStarSymbol(i+3) }}</view>
						<view class="number-keyword">{{ getStarName(i+3) }}</view>
					</view>
				</view>
				
				<view class="number-row">
					<view v-for="i in 3" :key="i+6" class="number-brief" :class="'number-' + (i+6)">
						<view class="number-circle">{{ getStarSymbol(i+6) }}</view>
						<view class="number-keyword">{{ getStarName(i+6) }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="back-btn" @click="goBack">返回</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	// 日期选择相关
	const selectedDate = ref('');
	const codeResult = ref(null);
	
	// 处理日期选择
	const handleDateChange = (e) => {
		selectedDate.value = e.detail.value;
	};
	
	// 获取最小日期
	const getMinDate = () => {
		return '1900-01-01';
	};
	
	// 获取最大日期
	const getMaxDate = () => {
		const today = new Date();
		const year = today.getFullYear();
		const month = String(today.getMonth() + 1).padStart(2, '0');
		const day = String(today.getDate()).padStart(2, '0');
		return `${year}-${month}-${day}`;
	};
	
	// 获取紫微星名称
	const getStarName = (index) => {
		const stars = {
			1: "紫微星",
			2: "天机星",
			3: "太阳星",
			4: "武曲星",
			5: "天同星",
			6: "廉贞星",
			7: "天府星",
			8: "太阴星",
			9: "贪狼星"
		};
		return stars[index] || "";
	};
	
	// 获取星宿符号
	const getStarSymbol = (index) => {
		const symbols = {
			1: "紫",
			2: "机",
			3: "日",
			4: "武",
			5: "同",
			6: "廉",
			7: "府",
			8: "阴",
			9: "狼"
		};
		return symbols[index] || "";
	};
	
	// 计算生日密码
	const calculateBirthdayCode = () => {
		if (!selectedDate.value) {
			uni.showToast({ title: '请选择日期', icon: 'none' });
			return;
		}
		
		// 解析日期
		const [year, month, day] = selectedDate.value.split('-').map(Number);
		
		// 简化计算命主星（此处为简化演示，真实紫微计算远比此复杂）
		let starIndex = ((year % 9) + (month % 9) + (day % 9)) % 9;
		if (starIndex === 0) starIndex = 9;
		
		// 获取命盘解析
		const starData = getStarData(starIndex);
		codeResult.value = {
			number: getStarName(starIndex),
			...starData
		};
	};
	
	// 获取紫微命盘星曜的解析数据
	const getStarData = (number) => {
		const starData = {
			1: {
				color: "linear-gradient(135deg, #9c27b0, #673ab7)",
				desc: "紫微星是紫微斗数中的帝星，主尊贵荣耀，为众星之首。紫微入命，主其人端庄稳重，气度不凡，有领导风范，受人尊敬。一生多掌权之象，能得贵人提携，享有名誉地位。",
				mission: "您的命主紫微，主格局宏大，注定要在特定领域建立权威与威望。您生来具有管理能力和责任感，适合担任领导角色，在政府、企业或学术界都有建树的可能。紫微星人重视名誉与地位，追求正统与规范。",
				talents: "组织能力强，具有全局观念，处事条理分明，有决断力。思维缜密，擅长规划，能够统筹全局。性格稳重踏实，举止得体，处事谨慎，适合从事管理、规划、教育、医疗等需要权威性的工作。",
				challenges: "紫微星人易有刚愎自用、固执己见的倾向。有时过于追求完美，造成压力过大。在困顺起伏时，易有孤傲之态，难以接受他人意见。需警惕因过度重视名誉地位而忽略生活情感。",
				advice: "修身方面，宜修养谦逊之心，多纳他人之言。事业上宜谋定而后动，先立德而后立功。因紫微主贵，当注重品德修养与专业能力并重。健康方面，应调理心脏和头部，避免情绪波动过大。闲暇时多与家人相处，平衡事业与家庭。"
			},
			2: {
				color: "linear-gradient(135deg, #29b6f6, #03a9f4)",
				desc: "天机星为机谋之星，主智慧聪明，思想敏捷，创意丰富。天机入命，主其人聪颖过人，思维活跃，具有创新能力和策划才能。善于察言观色，洞察先机，在学术、艺术、科技领域多有建树。",
				mission: "您的命主天机，主智慧睿智，注定在思想、创新或谋略方面有所成就。您生来具有敏锐的洞察力和丰富的想象力，适合从事需要创意和规划的工作。天机星人重视智识与新知，追求思想深度。",
				talents: "思维敏捷，创意无限，善于发现问题并提出解决方案。具有较强的语言表达能力和文字才华，思想前卫，充满创新精神。适合从事文学、艺术、科研、策划、咨询等需要智力和创造力的工作。",
				challenges: "天机星人易有心浮气躁、缺乏耐心的倾向。有时过于理想化，脱离现实。思虑过多，导致行动迟缓或犹豫不决。情绪波动较大，易受外界影响。需警惕因过度追求新奇而缺乏恒心。",
				advice: "修身方面，宜培养专注力与耐心，将创意落实为行动。事业上宜发挥思维优势，但需注重实践与落地。因天机主智，当注重知行合一，理论与实践并重。健康方面，应调理神经系统，保持充足睡眠，避免过度思虑。定期放空自己，让思维得到休息。"
			},
			3: {
				color: "linear-gradient(135deg, #ffb300, #ff9800)",
				desc: "太阳星为阳性之星，主光明正大，积极向上，充满活力。太阳入命，主其人性格开朗，为人光明磊落，有领导才能和感染力。举止大方，胸怀宽广，乐于助人，能得众人拥戴。",
				mission: "您的命主太阳，主光明磊落，注定要在公众事务或社交领域发光发热。您生来具有感染力和号召力，适合从事需要与人打交道的工作。太阳星人重视声誉与荣耀，追求正义与公平。",
				talents: "人缘极佳，具有强大的感染力和影响力，善于鼓舞人心。性格开朗热情，乐观向上，做事光明正大，不屑于小动作。适合从事公关、销售、演艺、教育、领导等需要个人魅力的工作。",
				challenges: "太阳星人易有自我膨胀、固执己见的倾向。有时过于自信，不容易接受批评。情绪外露，爱憎分明，易与人产生冲突。需警惕因过度追求表现而忽略细节和他人感受。",
				advice: "修身方面，宜修养平和之心，包容不同意见。事业上宜充分发挥阳光特质，但需注意倾听和团队协作。因太阳主名，当注重实际贡献与个人品牌并重。健康方面，应调理心脏和眼睛，保持情绪稳定。学会适当退让，与人和谐相处。"
			},
			4: {
				color: "linear-gradient(135deg, #ffd54f, #ffca28)",
				desc: "武曲星为财帛之星，主财运亨通，事业有成，务实精进。武曲入命，主其人工作勤奋，事业心强，具有经商才能和理财头脑。处事干练，雷厉风行，善于把握机会，创造财富。",
				mission: "您的命主武曲，主事业有成，注定在财富积累或实业发展方面有所建树。您生来具有经商头脑和实践能力，适合从事需要执行力和决断力的工作。武曲星人重视物质成就与实际效益。",
				talents: "执行力强，雷厉风行，善于把握机会并迅速行动。理财能力佳，具有经商头脑，懂得资源整合与利用。性格果断，处事干练，勇于冒险但有分寸。适合从事金融、商业、管理、地产等实业性工作。",
				challenges: "武曲星人易有急躁冲动、刚愎自用的倾向。有时过于追求实际利益，显得功利。做事强势，不易妥协，容易与人产生摩擦。需警惕因过度工作而忽略健康和家庭。",
				advice: "修身方面，宜修养耐心与柔和，学会适时退让。事业上宜充分发挥执行力优势，但需注意长远规划与人际关系。因武曲主财，当注重财富管理与道德品质并重。健康方面，应调理肝胆系统，避免过度劳累和情绪激动。定期放松身心，平衡工作与生活。"
			},
			5: {
				color: "linear-gradient(135deg, #90caf9, #64b5f6)",
				desc: "天同星为福德之星，主福气深厚，性情温和，仁慈善良。天同入命，主其人性格温和，为人善良，乐于助人，有爱心和同情心。处事圆融，善解人意，在医疗、服务、艺术领域多有建树。",
				mission: "您的命主天同，主福泽深厚，注定在帮助他人或服务社会方面有所贡献。您生来具有同理心和服务精神，适合从事需要关怀与奉献的工作。天同星人重视和谐与福祉，追求心灵平和。",
				talents: "同理心强，善解人意，具有关怀他人的天然能力。性格温和，宽厚仁慈，善于调解矛盾，创造和谐。艺术感性丰富，情感细腻，直觉敏锐。适合从事医疗、护理、咨询、服务、艺术等需要爱心和耐心的工作。",
				challenges: "天同星人易有优柔寡断、缺乏主见的倾向。有时过于感性，难以理性决策。情感丰富，易受他人影响，难以拒绝请求。需警惕因过度付出而忽略自身需求和边界。",
				advice: "修身方面，宜培养独立思考能力和决断力，学会适当拒绝。事业上宜发挥同理心优势，但需建立专业界限。因天同主福，当注重自我关爱与服务他人并重。健康方面，应调理消化系统，保持情绪稳定。学会自我保护，避免过度牺牲。"
			},
			6: {
				color: "linear-gradient(135deg, #ef5350, #e53935)",
				desc: "廉贞星为变动之星，主变化多端，情绪起伏，个性鲜明。廉贞入命，主其人性格刚强，个性独特，有艺术天赋和创造力。思想前卫，不拘一格，在艺术、改革、批判领域多有建树。",
				mission: "您的命主廉贞，主变化多端，注定在创新突破或艺术创作方面有所成就。您生来具有批判精神和艺术才华，适合从事需要独特视角和创造力的工作。廉贞星人重视独立与自由，追求突破常规。",
				talents: "创造力强，思想前卫，不拘一格，敢于挑战传统。艺术感极强，具有独特的审美视角和表达方式。性格鲜明，言行直接，敢爱敢恨。适合从事艺术、设计、评论、改革等需要创新和批判精神的工作。",
				challenges: "廉贞星人易有情绪起伏大、言行激进的倾向。有时过于特立独行，难以融入主流。批判性强，容易得罪人，人际关系复杂。需警惕因过度追求个性而忽略团队合作和社会认同。",
				advice: "修身方面，宜修养平和之心，学会控制情绪波动。事业上宜发挥创新优势，但需注意与人协作和市场接受度。因廉贞主变，当注重稳定基础与创新突破并重。健康方面，应调理神经系统和心理健康，保持情绪平衡。寻找适当渠道释放内在能量。"
			},
			7: {
				color: "linear-gradient(135deg, #66bb6a, #4caf50)",
				desc: "天府星为财福之星，主财运亨通，生活富足，福气深厚。天府入命，主其人性情温和，处世圆融，具有理财能力和管理才能。为人稳重，待人和气，能得长辈提携，家境富裕。",
				mission: "您的命主天府，主厚德载物，注定在积累财富或管理资源方面有所建树。您生来具有管理能力和务实精神，适合从事需要规划和资源整合的工作。天府星人重视稳定与富足，追求长远发展。",
				talents: "管理能力强，善于规划和资源整合，具有稳健的财富积累能力。性格温和，处事圆融，人际关系良好，善于化解矛盾。稳重可靠，有分寸感，能得长辈赏识。适合从事金融、管理、行政、教育等需要稳定性的工作。",
				challenges: "天府星人易有安于现状、缺乏进取的倾向。有时过于保守，错失发展机会。处事过于圆滑，难以表达真实想法。需警惕因过度追求安稳而忽略创新和突破。",
				advice: "修身方面，宜培养开拓精神，适当走出舒适区。事业上宜发挥稳健优势，但需增加创新意识。因天府主富，当注重财富规划与精神追求并重。健康方面，应调理脾胃系统，保持规律作息。接触新事物，拓展视野，避免过度守成。"
			},
			8: {
				color: "linear-gradient(135deg, #b0bec5, #90a4ae)",
				desc: "太阴星为阴性之星，主柔和内敛，智慧丰富，情感细腻。太阴入命，主其人性情温婉，内心丰富，具有艺术天赋和感知能力。心思细腻，洞察力强，在艺术、文学、心理领域多有建树。",
				mission: "您的命主太阴，主柔和内敛，注定在艺术创作或情感表达方面有所成就。您生来具有敏锐的感知力和丰富的内心世界，适合从事需要细腻感受和表达的工作。太阴星人重视内在体验与情感深度。",
				talents: "感受力强，情感丰富，具有敏锐的洞察力和直觉。艺术才华出众，特别是在文学、音乐、绘画等领域。心思细腻，善解人意，能够体会他人情绪。适合从事艺术、文学、心理、咨询等需要情感智慧的工作。",
				challenges: "太阴星人易有情绪波动大、内向封闭的倾向。有时过于敏感，容易受伤和疲惫。思虑过多，难以果断决策。需警惕因过度沉浸在情感世界而忽略现实需求。",
				advice: "修身方面，宜培养理性思考能力和情绪管理能力。事业上宜发挥情感智慧优势，但需建立专业边界。因太阴主情，当注重情感表达与理性分析并重。健康方面，应调理内分泌系统，保持情绪稳定。寻找健康方式释放情绪，避免情感郁结。"
			},
			9: {
				color: "linear-gradient(135deg, #ff7043, #ff5722)",
				desc: "贪狼星为桃花之星，主人缘极佳，社交广泛，魅力四射。贪狼入命，主其人风流倜傥，人缘极佳，具有社交才能和艺术天赋。性格开朗，交友广泛，在演艺、销售、公关领域多有建树。",
				mission: "您的命主贪狼，主人缘桃花，注定在社交活动或公众表演方面有所建树。您生来具有社交魅力和表现欲，适合从事需要人际互动和表达能力的工作。贪狼星人重视人际关系与生活乐趣。",
				talents: "社交能力强，魅力四射，能够吸引他人注意和喜爱。表达能力出色，善于言谈，具有说服力和感染力。艺术才华丰富，特别是表演和语言艺术。适合从事演艺、销售、公关、媒体等需要人际魅力的工作。",
				challenges: "贪狼星人易有放纵自我、缺乏节制的倾向。有时过于追求享乐，忽略责任和承诺。情感多变，难以专一，人际关系复杂。需警惕因过度社交而分散精力和目标。",
				advice: "修身方面，宜培养自律精神和专注能力。事业上宜发挥社交优势，但需建立清晰目标。因贪狼主情，当注重真诚交往与适度节制并重。健康方面，应调理内分泌系统，避免过度放纵和生活无度。建立健康的生活方式和人际边界。"
			}
		};
		
		return starData[number] || {
			color: "linear-gradient(135deg, #757575, #bdbdbd)",
			desc: "未找到相关解析",
			mission: "暂无数据",
			talents: "暂无数据",
			challenges: "暂无数据",
			advice: "暂无数据"
		};
	};
	
	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f8f9fc;
	padding-bottom: 40rpx;
}

.header {
	padding: 30rpx;
	background-color: #ffffff;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.title {
	font-size: 36rpx;
	font-weight: 600;
	color: #303133;
}

.content-card {
	background-color: #ffffff;
	margin: 30rpx;
	padding: 30rpx;
	border-radius: 16rpx;
	box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.05);
}

.subtitle {
	font-size: 32rpx;
	font-weight: 600;
	color: #303133;
	margin-bottom: 20rpx;
}

.desc-text {
	font-size: 28rpx;
	color: #606266;
	line-height: 1.6;
	margin-bottom: 30rpx;
}

.date-select-section {
	background-color: #f8f9fc;
	padding: 30rpx;
	border-radius: 16rpx;
	margin: 30rpx 0;
}

.date-picker {
	margin: 20rpx 0;
	background-color: #ffffff;
	padding: 20rpx;
	border-radius: 10rpx;
	box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
}

.picker-input {
	color: #303133;
	font-size: 28rpx;
	padding: 10rpx 0;
}

.query-btn {
	background: linear-gradient(135deg, #4393ff, #2979ff);
	color: white;
	margin: 20rpx 0 10rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-weight: 500;
	box-shadow: 0 6rpx 16rpx rgba(67, 147, 255, 0.2);
	
	&:active {
		transform: scale(0.98);
	}
}

.result-section {
	background-color: #f8f9fc;
	padding: 30rpx;
	border-radius: 16rpx;
	margin: 30rpx 0;
}

.result-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #303133;
	margin-bottom: 20rpx;
	text-align: center;
}

.energy-bar {
	height: 6rpx;
	width: 80%;
	margin: 0 auto 30rpx;
	border-radius: 3rpx;
}

.code-number {
	font-size: 40rpx;
	font-weight: 700;
	margin: 0 10rpx;
}

.result-desc {
	font-size: 28rpx;
	color: #606266;
	line-height: 1.6;
	margin-bottom: 30rpx;
	text-align: center;
}

.result-details {
	margin-top: 30rpx;
}

.detail-item {
	display: flex;
	margin-bottom: 26rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.detail-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 24rpx;
	font-weight: 600;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.detail-content {
	flex: 1;
}

.detail-title {
	font-size: 28rpx;
	color: #303133;
	font-weight: 500;
	margin-bottom: 8rpx;
}

.detail-text {
	font-size: 26rpx;
	color: #606266;
	line-height: 1.6;
}

.divider {
	display: flex;
	align-items: center;
	margin: 40rpx 0;
}

.divider-line {
	flex: 1;
	height: 1rpx;
	background-color: #ebeef5;
}

.divider-text {
	padding: 0 20rpx;
	font-size: 26rpx;
	color: #909399;
}

.section {
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #303133;
	margin-bottom: 20rpx;
	position: relative;
	padding-left: 20rpx;
	
	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 4rpx;
		height: 30rpx;
		width: 6rpx;
		background: linear-gradient(135deg, #4393ff, #2979ff);
		border-radius: 3rpx;
	}
}

.method-desc {
	font-size: 28rpx;
	color: #606266;
	line-height: 1.6;
	margin-bottom: 20rpx;
}

.example-box {
	background-color: #f8f9fc;
	padding: 20rpx;
	border-radius: 10rpx;
	margin-top: 20rpx;
}

.example-title {
	font-size: 28rpx;
	color: #303133;
	font-weight: 500;
	margin-bottom: 16rpx;
}

.example-content {
	font-size: 26rpx;
	color: #606266;
}

.example-text {
	font-weight: 500;
	margin-bottom: 10rpx;
}

.calculation {
	margin-bottom: 6rpx;
	color: #909399;
}

.example-result {
	font-weight: 500;
	color: #4393ff;
	margin-top: 10rpx;
}

.number-overview {
	margin-top: 40rpx;
}

.number-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.number-brief {
	text-align: center;
	width: 30%;
}

.number-circle {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12rpx;
	font-size: 32rpx;
	font-weight: 600;
	color: #ffffff;
}

.number-1 .number-circle { background: linear-gradient(135deg, #ff4b4b, #ff7676); }
.number-2 .number-circle { background: linear-gradient(135deg, #4fc3f7, #b3e5fc); }
.number-3 .number-circle { background: linear-gradient(135deg, #ffb74d, #ffe0b2); }
.number-4 .number-circle { background: linear-gradient(135deg, #4db6ac, #b2dfdb); }
.number-5 .number-circle { background: linear-gradient(135deg, #ab47bc, #d1c4e9); }
.number-6 .number-circle { background: linear-gradient(135deg, #66bb6a, #c8e6c9); }
.number-7 .number-circle { background: linear-gradient(135deg, #5c6bc0, #c5cae9); }
.number-8 .number-circle { background: linear-gradient(135deg, #26a69a, #80cbc4); }
.number-9 .number-circle { background: linear-gradient(135deg, #7e57c2, #d1c4e9); }

.number-keyword {
	font-size: 24rpx;
	color: #606266;
}

.image-container {
	margin: 30rpx 0;
}

.banner-image {
	width: 100%;
	height: 300rpx;
	border-radius: 12rpx;
}

.back-btn {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background: linear-gradient(135deg, #4393ff, #2979ff);
	color: #ffffff;
	border-radius: 40rpx;
	margin: 40rpx auto;
	font-size: 28rpx;
	box-shadow: 0 6rpx 16rpx rgba(67, 147, 255, 0.2);
	
	&:active {
		transform: scale(0.98);
	}
}
</style> 